import React, {Component} from 'react';
import {Flex} from "antd-mobile";
import styles from './index.module.css'
import down from '../../../../assets/down.svg'

const titleList = [
    {title: '区域', type: 'area'},
    {title: '方式', type: 'mode'},
    {title: '租金', type: 'price'},
    {title: '筛选', type: 'more'},
]

class FilterTitle extends Component {
    render() {
        return (
            <Flex className={styles.root}>
                {
                    titleList.map(item => {
                        const selected = item.type;
                        const {titleselectedStatus,onClick} = this.props;
                        /*选中项为selected类名*/
                        return <span key={item.type}
                                     className={[styles.down, titleselectedStatus[selected] ? styles.selected : ''].join(' ')}
                            onClick={() =>{onClick(item.type)}}>
                            <span>{item.title}</span>
                            <img src={down} className={styles.icon} alt=""/>
                        </span>
                    })}
            </Flex>
        );
    }
}

export default FilterTitle;
